<template>

  <div class="login" >
     <!-- <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="canvas gradient"
      ></vue-particles>-->

      <div class="contend">
          <Card style="width:400px;margin: 200px auto;background-color: rgba(255, 255, 255, 0.7);box-shadow: 0 0 15px rgb(68, 48, 45);">
              <p slot="title"><img src="../../assets/images/logo3.png" alt="" class="logo3_class">正睿智库</p>
              <!--<p slot="title">正睿咨询 <span>文件管理系统</span></p>-->
             <!-- <a href="javascript:;" @click="to_url()" slot="extra">
                  <Icon type="person-add"></Icon>
                  注册
              </a>-->
              <Form ref="formInline" :model="formInline" :rules="ruleInline">
                  <FormItem prop="user">
                      <Input type="text" v-model="formInline.user" placeholder="请输入用户名">
                          <Icon type="ios-person-outline" slot="prepend"></Icon>
                      </Input>
                  </FormItem>
                  <FormItem prop="password">
                      <Input type="password" v-model="formInline.password" placeholder="请输入密码">
                           <Icon type="ios-lock-outline" slot="prepend"></Icon>
                      </Input>
                  </FormItem>
                  <FormItem>
                      <Button type="primary" @click="handleSubmit('formInline')" style="width: 100%">登录</Button>
                  </FormItem>
              </Form>
          </Card>

      </div>

    <Modal v-model="modal_login" width="400">
      <p slot="header" style="color:#2d8cf0;text-align:center;font-size: 16px;">
        <Icon type="ios-information-circle"></Icon>
        <span >首次登录设备认证</span>
      </p>
      <div style="text-align:center">
        <p style="font-size: 16px;">您的账号第一次登录系统，即将进行登录设备、浏览器认证。认证后您的账号只能在这台设备，以及当前浏览器上登录。您确定要认证设备吗？</p>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" long :loading="modal_loading" @click="rzsbSubmit" style="font-size: 16px;">认证设备，并登录</Button>
      </div>
    </Modal>
  </div>

</template>

<script scoped>
  import {jquery} from '../../assets/js/jquery-2.1.1.min.js' ;
  import {color_function} from '../../assets/js/color.js' ;
  import Fingerprint2 from 'fingerprintjs2' ;

  export default {
    name: '',
    data() {
      return {
        totalTime:2,
        formInline: {
          user: '',
          password: ''
        },
        eq_code:'',
        modal_login:false,
        modal_loading: false,
        ruleInline: {
          user: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度最小为6', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
    },
    methods: {
      to_url(){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/8/20 14:56
        *=======================================================
        *@function  跳转地址
        *=====================================================*/
        this.$router.push('/regist')
      },
      rzsbSubmit(){
        this.$http({
          method: 'post',
          url: this.CD_.qj_url+'index/User/rzsblogin',
          data:{
            loginname : this.formInline.user ,
            password : this.formInline.password ,
            eq_code : this.eq_code ,
          }
        }).then(function(res){
          var json = res.data ;
          if(json.status){
            console.log(json.data) ;
            this.CD_.user_Data = json.data ;
            window.localStorage.setItem('user_Data',JSON.stringify(json.data)) ;

            this.$Message.success('认证成功,正在登录~~');
            this.$store.commit('ADD_COUNT', json.token);

            let clock = window.setInterval(() => {
              this.totalTime-- ;
              if (this.totalTime < 0) {
                window.clearInterval(clock) ;
                this.$Loading.finish();
                this.$router.push('/') ;
              }
            },1000)
          }else{
            this.$Message.error(json.msg);
            this.$Loading.error();
          }
          this.modal_loading = false ;
        }.bind(this)).catch(function(err){
          this.$Message.error('认证失败，错误：'+ err);
          this.$Loading.error();
          this.modal_loading = false ;
        }.bind(this))
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Loading.start();
            this.$http({
              method: 'post',
              url: this.CD_.qj_url+'index/User/login',
              data:{
                loginname : this.formInline.user ,
                password : this.formInline.password ,
                eq_code : this.eq_code ,
              }
            }).then(function(res){
              var json = res.data ;
              if(json.status){
                console.log(json.data) ;
                this.CD_.user_Data = json.data ;
                window.localStorage.setItem('user_Data',JSON.stringify(json.data)) ;

                this.$Message.success('登录成功，欢迎回来~~~');
                this.$store.commit('ADD_COUNT', json.token);

                let clock = window.setInterval(() => {
                  this.totalTime-- ;
                  if (this.totalTime < 0) {
                    window.clearInterval(clock) ;
                    this.$Loading.finish();
                    this.$router.push('/') ;
                  }
                },1000)
              }else{

                if(json.msg === 'RZSB' ){
                  this.modal_login = true ;
                }else {
                  this.$Message.error(json.msg);
                }

                this.$Loading.error();
              }
            }.bind(this)).catch(function(err){
              this.$Message.error('登录失败，错误：'+ err);
              this.$Loading.error();
              this.modal_loading = false ;
            }.bind(this))

          } else {
            this.$Message.error('请填写完整的登录信息~~');
          }
        })
      }
    },
    mounted() {
      var _this = this ;
      setTimeout(function () {
        new Fingerprint2.get({
          userDefinedFonts: ["Nimbus Mono", "Junicode", "Presto"]
        }, function(components) {
          _this.eq_code = components[2].value+''
            +components[3].value+''
            +components[4].value+''
            +components[5].value[0]+''
            +components[5].value[1]+''
            +components[27].value
        })
      },1000);

    }
  }
</script>
<style lang="scss" scoped>
  .ivu-card-head {
    border-bottom: 1px solid rgba(233, 234, 236, 0.35);
  }
  .login {
    background: url("../../assets/images/bg_img.jpg") no-repeat center;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .ivu-card-bordered {
      border-color: rgba(233, 234, 236, 0.2);
    }
    .canvas {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .contend {

    }
  }

  .ivu-card-head p, .ivu-card-head-inner {
    display: inline-block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-size: 25px;
    color: #443635;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 50px;
    span{
      font-size: 18px;
    }
  }

  .logo3_class{
    width: 45px;
    position: absolute;
    top: 5px;
    left: 15px;
  }
</style>
